<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>安全首页</title>
    <script>
        var requireExtraPaths = {
            extrance: '../../../energy_js/report/homeEnergy'
        };
        var cssFileLoadArr = ['/content/css/sub/homePage.css'];
    </script>
    <jsp:include flush="true" page="../../base/base.jsp"></jsp:include>
</head>
<body class="site-body" style="overflow: auto;">
<a class="page-print-btn" onclick="window.print();"></a>

<div class="index-content anquan-index">
    <div class="time-select-fixed" style="width: 100%;">
        <div class="time-select-bar ct-shadow clearfix">
            <div class="line-select">
                <span class="text">线路选择</span>
                <span id="showlineName"></span>

                <div class="line-wrap">
                    <input type="text" class="search-input" id="lineSelected">

                    <div class="tree-box">
                        <ul id="lineTree" class="ztree line-dropdown"></ul>
                    </div>
                </div>
            </div>
            <div class="time-select time-select2  ml0" id="dateDiv">
                <a class="active" val="02">昨天</a>
                <a val="03">近7天</a>
                <a val="04">本月</a>
                <a val="05">上月</a>
                <a val="06">今年</a>
                <a val="07">去年</a>
            </div>
        </div>
    </div>
    <div class="blank-65"></div>
    <div class="data-num clearfix mt25">
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="energyIndexMore">
                        <h4 id="energyIndexTitle">平均百公里油耗（L）</h4>

                        <p id="avgEnergyIndex">
                        </p>
                        <span style="right: 45px; font-size: 13px;" id="avgEnergySpan"></span>
                    </a>

                    <div class="item-panel">
                        <a class="active" id="changeOilIndex">油</a>
                        <a id="changeGasIndex">气</a>
                        <a id="changeElecIndex">电</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="costIndexMore">
                        <h4 id="costIndexTitle">平均百公里油耗费用（元）</h4>

                        <p id="avgCostPerHour">
                        </p>
                        <span style="right: 10px; font-size: 13px;" id="avgCostPerHourSpan"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="energyMileMore">
                        <h4>运行里程（KM）</h4>

                        <p id="energyExceptNum">
                        </p>
                        <span style="right: 10px; font-size: 13px;" id="energyExceptNumSpan"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="energyDurationMore">
                        <h4>运行时长（小时）</h4>

                        <p id="energyExceptCarNum">
                        </p>
                        <span style="right: 10px; font-size: 13px;" id="energyExceptCarNumSpan"> </span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <h5>影响能耗的因素（前三名）</h5>

                    <div class="clearfix">
                        <div class="inner">
                            <span class="flag"></span>
                            <ul id="drvEnergyInfluence">
                            </ul>
                        </div>
                        <div class="inner">
                            <span class="flag flag2"></span>
                            <ul class="no-bd" id="bhvEnergyInfluence">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ct-energe ct-shadow mt25" style="padding-top: 0;padding-bottom: 0;">
        <div class="title-bar">整体能耗趋势图</div>
        <div class="clearfix">
            <div class="chart-item">
                <div id="oilTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
            <div class="chart-item">
                <div id="elecTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
            <div class="chart-item">
                <div id="gasTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
        </div>
        <div class="clearfix" style="page-break-before: always;">
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="oilRankingMore">更多</a>
							<span class="radio-box">
								<input type="radio" name="changeOilRanking" checked="checked" value="0">
								<span class="radio-text">按车辆</span>
							</span>
							<span class="radio-box ml10">
								<input type="radio" name="changeOilRanking" value="1">
								<span class="radio-text">按驾驶员</span>
							</span>
                    </div>
                    <div id="carOilRankingDiv">
                        <table width="100%" class="table-style2" id="carOilRanking">
                        </table>
                    </div>
                    <div id="driverOilRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverOilRanking">
                        </table>
                    </div>
                </div>
            </div>
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="elecRankingMore">更多</a>
							<span class="radio-box">
								<input type="radio" name="changeElecRanking" checked="checked" value="0">
								<span class="radio-text">按车辆</span>
							</span>
							<span class="radio-box ml10">
								<input type="radio" name="changeElecRanking" value="1">
								<span class="radio-text">按驾驶员</span>
							</span>
                    </div>
                    <div id="carElecRankingDiv">
                        <table width="100%" class="table-style2" id="carElecRanking">
                        </table>
                    </div>
                    <div id="driverElecRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverElecRanking">
                        </table>
                    </div>
                </div>
            </div>
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="gasRankingMore">更多</a>
							<span class="radio-box">
								<input type="radio" name="changeGasRanking" checked="checked" value="0">
								<span class="radio-text">按车辆</span>
							</span>
							<span class="radio-box ml10">
								<input type="radio" name="changeGasRanking" value="1">
								<span class="radio-text">按驾驶员</span>
							</span>
                    </div>
                    <div id="carGasRankingDiv">
                        <table width="100%" class="table-style2" id="carGasRanking">
                        </table>
                    </div>
                    <div id="driverGasRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverGasRanking">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ct-grid-2 clearfix mt25">
        <div class="inner-box">
            <div class="ct-shadow">
                <div class="layout-inner energe-abnormal">
                    <div class="layout-left">
                        <div class="clearfix">
                            <div class="title-bar ml0">线路里程统计表</div>
                        </div>
                        <div class="chart-box mt25">
                            <div id="energyExceptionChart" style="height: 300px;width: 500px;margin: 0 auto;">
                            </div>
                        </div>
                    </div>
                    <div class="layout-right mt25">
                        <div class="pl15">
                            <div class="item-box clearfix">
                                <div class="item">
                                    <div class="item-inner pr10">
                                        <div class="ct-box">
                                            <h4>运行里程</h4>

                                            <p id="energyExceptionCount">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-inner item-inner2 pl10">
                                        <div class="ct-box">
                                            <h4>运行时长</h4>

                                            <p id="energyExceptionCars">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-wrap mt20">
                                <table width="100%" class="table-style2 table-style2-s" id="energyExceptionTab">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ct-grid-2 clearfix mt25" style="page-break-before: always;">
        <div class="inner-box">
            <div class="ct-shadow  ps-r">
                <div class="tab-nav clearfix">
                    <a class="active" id="changeOilCost">油</a>
                    <a id="changeElecCost">电</a>
                    <a id="changeGasCost">气</a>
                </div>
                <div class="layout-inner">
                    <div class="layout-left">
                        <div class="clearfix">
                            <div class="title-bar ml0">
                                <a id="energyCostMore1">能耗成本分析</a>
                            </div>
                        </div>
                        <div class="chart-box mt25">
                            <div id="energyCostChart" style="height: 300px;width: 500px;margin: 0 auto;"></div>
                            <div id="elecEnergyCostChart" style="height: 300px; display: none;width: 500px;margin: 0 auto;"></div>
                            <div id="gasEnergyCostChart" style="height: 300px; display: none;width: 500px;margin: 0 auto;"></div>
                        </div>
                    </div>
                    <div class="layout-right">
                        <div class="pl15">
                            <div class="mt15 ar clearfix">
                                <!--<a href="" class="btn-link" style="position: relative;top:-3px;">加油管理</a>-->
                                <a class="more " style="margin-bottom:28px;position:relative;top:12px"
                                   id="energyCostMore2">详细信息</a>
                            </div>
                            <div class="table-wrap mt10" id="oilCostTabDiv">
                                <table width="100%" class="table-style2 table-style2-s" id="energyCostTab">
                                </table>
                            </div>
                            <div class="table-wrap mt10" style="display: none;" id="elecCostTabDiv">
                                <table width="100%" class="table-style2 table-style2-s" id="elecEnergyCostTab">
                                </table>
                            </div>
                            <div class="table-wrap mt10" style="display: none;" id="gasCostTabDiv">
                                <table width="100%" class="table-style2 table-style2-s" id="gasEnergyCostTab">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ct-grid-2 clearfix mt25" style="page-break-before: always;">
        <div class="inner-box">
            <div class="ct-shadow pt0 h-auto pb0">
                <div class="layout-inner energe-abnormal energe-abnormal2 clearfix">
                    <div class="layout-left">
                        <div class="clearfix">
                            <div class="title-bar fl ml0">
                                能耗特征模型分析
                            </div>
                        </div>
                        <div class="chart-box">
                            <div id="energyStatusPieChart" style="width: 500px;margin: 0 auto;"></div>
                        </div>
                    </div>
                    <div class="layout-right  energe-comment-area">
                        <div class="arrow"></div>
                        <div class="box">
                            <p id="energyConclusion">
                            </p>
                        </div>
                        <div class="box">
                            <h4>其中导致本月能耗上升的主要原因</h4>

                            <div class="table-wrap">
                                <table class="table-style7" width="100%" id="energyRiseDriver">
                                </table>
                            </div>
                            <h4 class="mt10">其中导致能耗上升的主要原因</h4>

                            <div class="table-wrap">
                                <table class="table-style7" width="100%" id="energyRiseCar">
                                </table>
                            </div>
                        </div>
                        <div class="box no-bd">
                            <p id="energyAdvice"></p>
                            <h4>根据系统的大数据模型对历史的分析结果，建议调整驾驶行为，数据显示当满足下列条件时，能够有效的降低能耗。</h4>

                            <div class="clearfix">
                                <div class="fl">
                                    <p id="enerAdviceBhv">
                                    </p>
                                </div>
                                <div class="fr">
                                    <p id="enerAdviceMainte">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
